let box = document.querySelector("#box")
    box.addEventListener
class move {
    constructor() {
        this.box = this.$("#box");
        this.ul = this.$("ul")
        this.ol = this.$("ol");
        this.li = this.$("ul li");
        this.img = this.$("img");
        this.left = this.$("#left");
        this.right = this.$("#right");
       
        this.index = 0;
      
        this.timess = 0;

        this.ulLi = this.ul.children;
        this.olLi = this.ol.children;
        this.imgW = this.img.offsetWidth;
        this.box.addEventListener("mouseover", this.overFn.bind(this));
        this.box.addEventListener("mouseout", this.outFn.bind(this));
        this.right.addEventListener("click", this.clickFnR.bind(this));
        this.left.addEventListener("click", this.clickFnL.bind(this));
        
        this.auto();

    
        for (let i = 0; i < this.ulLi.length; i++) {
            
            this.newLi = document.createElement("li");
           
            this.ol.appendChild(this.newLi);
            
            i == 0 && this.newLi.classList.add("color");
            
            this.newLi.addEventListener("click", this.clickFn.bind(this, i));
        }
    }
 
    overFn() {
        this.btn.style.display = "block";
        clearInterval(this.timess);
    }
 
    outFn() {
        this.btn.style.display = "none";
        this.auto();
    }
   
    clickFn(i) {
        this.index = i;
        this.classOn(i);
    }


    clickFnR() {
        this.index++;
        if (this.index == this.ulLi.length) this.index = 0;
        let i = this.index;
        this.classOn(i);
    }

    clickFnL() {
        this.index--;
        if (this.index == -1) this.index = this.ulLi.length - 1;
        let i = this.index;
        this.classOn(i);
    }

    classOn(i) {
        let tmpx = this.imgW * i;
        this.ul.style.left = -tmpx + "px";
        this.$(".color").classList.remove("color");
        this.olLi[i].classList.add("color");

    }
    auto() {
        this.timess = setInterval(() => {
            this.clickFnR();
        }, 3000)
    }

    $(tag) {
        return document.querySelector(tag);
    }
}
new move;